<template>
	<div id="sync">
		<at-tabs type="border-card" @tab-click="handleClick" v-model="active">
			<at-tab-pane label="新增历史信息" name="add">
			</at-tab-pane>
			<at-tab-pane label="修改历史信息" name="update">
			</at-tab-pane>
			<at-tab-pane label="删除历史信息" name="delete">
			</at-tab-pane>
		</at-tabs>
		<div class="tabPanebox">
			<div class="bottomLine">
			{{this.title}}</div>
			<at-search class="searchFloat" v-model="input" placeholder="请输入用户名、用户ID或机构..." type="text" project='mh'
			 @keyup.enter.native="select" icon="search" :on-icon-click="select"></at-search>
			<div class="tableBox">
				<at-table :data="syncLog" @sort-change="sortChange" @filter-change="filterHandler">
					<at-table-column prop="zr_time" label="更新时间" width="180" sortable="custom">
					</at-table-column>
					<at-table-column prop="person_id" label="用户ID" width="180">
					</at-table-column>
					<at-table-column prop="person_name" label="用户名" width="180">
					</at-table-column>
					<at-table-column prop="user_name" label="账号" width="180">
					</at-table-column>
					<at-table-column prop="fuser_group_name" label="所属用户组" width="180"
					 show-overflow-tooltip>
					</at-table-column>
					<at-table-column prop="node_name" label="所属机构">
					</at-table-column>
					<at-table-column prop="email" label="邮箱">
					</at-table-column>
					<at-table-column prop="mobile_phone" label="电话号码">
					</at-table-column>
				</at-table>
				<Pagination :currentPage="currentPage" :total="total" :pageSizes="pageSizes" :pageSize="pageSize" layout='total, sizes, prev, pager, next, jumper'
		 @current-change="handleCurrentChange" @size-change="handleSizeChange"></Pagination>
			</div>

		</div>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	import $http from '../../../../utils/http.js'
	export default {
	  name: 'synchronization',
	  data () {
	    return {
	      filtes: [
	        { 'type': 'add', 'value': '', 'search': '' },
	        { 'type': 'update', 'value': '', 'search': '' },
	        { 'type': 'delete', 'value': '', 'search': '' }
	      ],
	      input: '',
	      active: 'add',
	      oldActive: [],
	      pageSizes: [20, 40, 80],
	      title: '新增历史信息'
	    }
	  },
	  computed: {
	    currentPage: {
	      get () {
	        return this.$store.state.users.syncLog.pagination.current
	      },
	      set (row) {
	        this.$store.state.users.syncLog.pagination.current = row
	      }
	    },
	    ...mapState({
	      syncLog: state => state.users.syncLog.table, // 列表数据
	      total: state => state.users.syncLog.total, // 列表数据
	      pageSize: state => state.users.syncLog.pagination.pageSize,
	      filters: state => state.group.optionName
	    })
	  },
	  methods: {
	    filterHandler (value) {
	      // 获取当前tab在oldActive的索引
	      var index = this.oldActive.indexOf(this.active)
	      // 获取当前tab在filtes的索引
	      var indexs = this.filtes.findIndex((element) => (element.type === this.active))
	      // 将tab存入数组
	      this.oldActive.push(this.active)
	      // 此数组不能出现重复元素
	      this.oldActive = Array.from(new Set(this.oldActive))
	      // 过滤数组中对应tab的value赋值
	      this.filtes[indexs].value = value['user_name']
	      // 当过滤条件为重置时删除元素
	      if (value['user_name'].length === 0) {
	        this.oldActive.splice(index, 1)
	      }
	      this.setFilter(this.active, value['user_name'])
	      // this.$store.commit('user/syncFilters', value['user_name'])
	      // this.$store.dispatch('user/getSynclog', { 'type': this.active })
	    },
	    setFilter (type, value) {
	      if (value.length > 0) {
	        let form = { 'user_group_id': JSON.stringify(value) }
	        var _this = this
	        $http.post('api/group/id', form).then(function (response) {
	          if (response.status === 'success') {
	            if (response.msg.length > 0) {
	              let personId = []
	              for (var i = 0; i < response.msg.length; i++) {
	                personId.push(response.msg[i].person_id)
	              }
	              _this.$store.commit('user/syncFilters', personId)
	              _this.$store.dispatch('user/getSynclog', { 'type': type })
	            } else {
	              _this.$store.commit('user/syncFilters', ['asd'])
	              _this.$store.dispatch('user/getSynclog', { 'type': type })
	            }
	          }
	        }
	        ).catch(function (error) {
	          console.log(error)
	        })
	      } else {
	        this.$store.commit('user/syncFilters', [])
	        this.$store.dispatch('user/getSynclog', { 'type': type })
	      }
	    },
	    select () {
	      // 搜索
	      var indexs = this.filtes.findIndex((element) => (element.type === this.active))
	      var value = this.filtes[indexs].search
	      value = this.input
	      this.$store.commit('user/userSyncvalue', value)
	      this.$store.dispatch('user/getSynclog', { 'type': this.active })
	    },
	    sortChange ({ column, prop, order }) {
	      if (prop) {
	        var data = {
	          'prop': prop,
	          'order': order.substring(0, order.length - 3)
	        }
	        this.$store.commit('user/syncOrder', data)
	        this.$store.dispatch('user/getSynclog', { 'type': this.active })
	      }
	    },
	    getMessage () {
	      this.$store.dispatch('user/getSynclog', { 'type': this.active, 'time': 'ar_time' })
	    },
	    handleSizeChange (el) {
	      this.$store.commit('user/getPageize', el)
	      this.getMessage()
	    },
	    // 显示第几页
	    handleCurrentChange (ev) {
	      this.$store.commit('user/getCurrent', ev)
	      this.getMessage()
	    },
	    handleClick (tab, event) {
	      this.title = tab.label
	      this.input = ''
	      this.currentPage = 1
	      // this.$refs.rest.$children[8].filterPanels['at-table_1_column_5'].handleReset()
	      var indexs = this.filtes.findIndex((element) => (element.type === tab.name))
	      if (this.oldActive.includes(tab.name) === false) {
	        this.$store.commit('user/syncFilters', '')
	      } else {
	        this.$store.commit('user/syncFilters', this.filtes[indexs].value)
	      }
	      this.$store.commit('user/userSyncvalue', '')
	      this.$store.dispatch('user/getSynclog', { 'type': tab.name })
	    }
	  },
	  mounted () {
	    this.getMessage()
	    this.$store.dispatch('group/getOptions', 1)
	  }
	}
</script>
<style>
	#sync .at-tabs--border-card>.at-tabs__header{
		background-color: #ecf0f5;
	}
	#sync .tabPanebox{
		padding: 20px
	}
	#sync .tableBox{
		border: 1px solid #EEE
	}
	#sync .searchFloat {
		float: right;
		margin-top: 20px;
		margin-right: 20px
	}


	#sync .tittle {
		float: left;
	}

	#sync .at-pagination {
		width: 40%;
		margin: 0px auto;
		margin-top: 20px;
	}

	#sync .at-table__body-wrapper {
		overflow: hidden;
	}

	#sync {
		background-color: white;
		padding-bottom: 20px
	}

	#sync .inputsize {
		float: right;
		z-index: 100
	}

	#sync .at-tabs__content {
		width: 100%;
		padding: 0;
	}

	#sync .floatRight {
		float: right;
		z-index: 100;
		position: relative;
		margin-right: 17px;
		margin-top: 10px
	}

	#sync .bottomLine {
		height: 50px;
		line-height: 50px;
		padding-left: 20px;
		width: 100%;
		overflow: hidden;
		border: 1px solid #EEE;
		border-bottom: none;
		background-color: white;
		font-size: 12px;
		font-weight: bold;
		color: #5c6781
	}

	#sync .bottomLine>span {
		color: #5c6871;
		font-size: 14px;
		font-weight: bold;
	}
</style>